<template>
  <div>
    <el-dialog title="选择学生" :visible.sync="isAddStudent" width="60%" :before-close="close" :close-on-click-modal='false'>
      <el-row :gutter="24" class="centerTable">
        <el-table border :data="tableData" :class="tableConfig.class" :style="tableConfig.style" v-loading="tableConfig.loading" @selection-change="goToDeleteSelect">
        <!-- 多选按钮 -->
        <template v-if="tableConfig.checkout==true">
          <el-table-column type="selection" align="center" :selectable="selectable"></el-table-column>
        </template>
        <template v-for="(item, index) in tableConfig.config">
          <el-table-column v-if="item.prop === 'radio'" :key="'radio'+index" :width="item.width">
            <template slot-scope="scope">
              <el-radio v-model="radio" :label="scope.row.uid">&nbsp;</el-radio>
            </template>
          </el-table-column>
          <!-- 操作 -->
          <template v-else-if="item.prop === 'operation'">
            <el-table-column :key="item.prop" :prop="item.prop" :label="item.label" :align="tableConfig.align?tableConfig.align:'center'" :width="item.width" :fixed="item.fixed">
              <template slot-scope="scope">
                <template v-if="scope.$index !==0">
                  <el-button v-for="n in item.list" :key="n.id" @click="goToOperation(scope.row, n.id)" type="text" size="small" :class="n.className">{{n.name}}</el-button>
                </template>
                <template v-else>
                  <el-button type="primary" round size="mini" @click="goToOperation(scope.row, 'query')">查询</el-button>
                  <el-button type="text" @click="goToOperation(scope.row, 'del')">清除</el-button>
                </template>
              </template>
            </el-table-column>
          </template>
          <!-- 状态 -->
          <template v-else-if="item.prop === 'status'">
            <el-table-column :key="item.id" :prop="item.prop" :label="item.label" :align="tableConfig.align?tableConfig.align:'center'" :width="item.width">
              <template slot-scope="scope">
                <div v-if="scope.$index === 0">
                  <el-input v-model="item.modelValue" placeholder="请输入内容" v-if="scope.row[item.prop] === 'input'"></el-input>
                  <el-select v-model="item.modelValue" placeholder="请选择" v-if="scope.row[item.prop] === 'select'">
                    <el-option v-for="item in item.optionsList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </div>
                <template v-else>
                  <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" active-color="#49abf8" inactive-color="#ec5529" @change="changeSwitch(scope.row)"/>
                </template>
              </template>
            </el-table-column>
          </template>
          <!-- 内容 -->
          <template v-else>
            <el-table-column :key="index" :prop="item.prop" :label="item.label" :width="item.width" :align="item.align" :formatter="item.formatter">
              <template slot-scope="scope">
                <div v-if="scope.$index === 0">
                  <el-input v-model="item.modelValue" placeholder="请输入内容" v-if="scope.row[item.prop] === 'input'"></el-input>
                  <el-select v-model="item.modelValue" placeholder="请选择" v-if="scope.row[item.prop] === 'select'">
                    <el-option v-for="item in item.optionsList" :key="item.id" :label="item.title" :value="item.id"></el-option>
                  </el-select>
                </div>
                <div v-else >
                  <div v-if="item.prop === 'range'">
                     <template>
                      <el-popover trigger="hover" placement="top">
                        <el-tree :data="scope.row[item.prop]" :props="defaultProps"></el-tree>
                        <div slot="reference" class="name-wrapper">
                          <el-tag size="medium">查看权限</el-tag>
                        </div>
                      </el-popover>
                    </template>
                  </div>
                  <div v-else>{{scope.row[item.prop]}}</div>
                </div>
              </template>
            </el-table-column>
          </template>
        </template>
      </el-table>
      </el-row>
      <el-row :gutter="24" class="fr">
        <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="this.limit" layout="total, prev, pager, next" :total="total"> </el-pagination>
      </el-row>
      <br>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close()">取 消</el-button>
        <el-button type="primary" @click="close(1)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import homeTab from '@/components/table.vue'
import {APISTUDENTLIST} from '@/common/api.js'
export default {
  props: ['isAddStudent'],
  components: {homeTab},
  data () {
    return {
      form: {},
      configRow: ['input', '', 'input', '', '', '', '', '', '', ''], // 配置的就是input、select 没有就是空
      configRowList: {
        real_name: '',
        sex_name: '',
        t_id: ''
      },
      tableData: [],
      tableConfig: {
        loading: false,
        class: 'table-list', // 表格的class名
        style: 'width:100%',
        checkout: false, // 控制是否有多选框
        index: true, // 是否有序号
        config: [
          {
            prop: 'radio',
            label: '序号',
            width: '40'
          },
          {
            label: '姓名',
            prop: 'real_name',
            align: 'center',
            modelValue: '',
            width: '200'
          },
          {
            label: '性别',
            prop: 'sex_name',
            align: 'center',
            modelValue: '',
            optionsList: [{
              title: '男',
              id: 1
            }, {
              title: '女',
              id: 2
            }]
          },
          {
            label: '帐号',
            prop: 't_id',
            align: 'center',
            width: '100',
            modelValue: '',
            optionsList: []
          },
          {
            label: '学籍号',
            prop: 'student_id',
            align: 'center',
            width: '100',
            modelValue: '',
            optionsList: []
          },
          {
            label: '学段',
            prop: 'title',
            align: 'center',
            width: '100',
            modelValue: '',
            optionsList: []
          },
          {
            label: '年级',
            prop: 'grade_name',
            align: 'center',
            width: '200',
            modelValue: '',
            optionsList: []
          },
          {
            label: '班级',
            prop: 'class_name',
            align: 'center',
            modelValue: '',
            optionsList: []
          },
          {
            label: '生日',
            prop: 'birthday',
            align: 'center',
            modelValue: '',
            optionsList: []
          },
          {
            label: '状态',
            prop: 'flag_name',
            align: 'center',
            modelValue: '',
            optionsList: []
          },
          {
            prop: 'operation',
            label: '操作',
            fixed: 'right',
            width: '200',
            list: []
          }
        ]
      },
      currentPage: 1,
      total: 0,
      page: 1,
      checkStr: [],
      limit: 10,
      radio: null
    }
  },
  created () {
    this.tableList()
  },
  methods: {
    close (type) {
      if (type === 1) {
        type = this.checkStr
      } else {
        type = []
      }
      this.$emit('noAddStudent', type)
    },
    selectable (row, index) {
      if (index !== 0) {
        return true
      } else {
        return false
      }
    },
    InIt () { // 初始化
      this.tableData = []
      const arrs = Object.keys(this.configRowList)
      const obj = {}
      arrs.map((item, index) => {
        obj[item] = this.configRow[index]
      })
      this.tableData.unshift(obj)
    },
    tableList () { // 表格
      this.form.page = this.page
      this.form.limit = this.limit
      APISTUDENTLIST(this.form).then((res) => {
        if (res.status === 1) {
          this.InIt()
          this.total = res.data.totalNumber
          this.currentPage = res.data.page
          res.data.list.forEach(item => {
            this.tableData.push(item)
          })
        } else {
          this.$message.error(res.msg)
          this.InIt()
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    goToDeleteSelect (val) { // 多选
      let arr = []
      val.forEach(item => {
        arr.push(item)
      })
      this.checkStr = arr
    },
    goToOperation (val, id) { // 按钮
      if (id === 'query') { // 搜素
        this.dataProcessing()
      } else if (id === 'del') { // 清除
        this.form = []
        this.tableConfig.config.forEach(element => {
          element.modelValue = ''
        })
        this.tableList()
      }
    },
    dataProcessing () { // 整理
      this.tableConfig.config.forEach(element => {
        if (element.label === '姓名') {
          this.form.real_name = element.modelValue
        }
        if (element.label === '帐号') {
          this.form.t_id = element.modelValue
        }
      })
      this.tableList()
    },
    handleCurrentChange (val) { // 分页
      this.page = val
      this.tableList()
    }
  },
  watch: {
    'radio': function (newVal) {
      this.tableData.forEach(item => {
        if (newVal === item.uid) {
          this.checkStr = []
          this.checkStr.push(item)
        }
      })
    }
  }
}
</script>
